<template>
  <div>
    <a-space direction="vertical" size="large" fill>
      <div v-for="item in data" :key="item.id">
        <BlogItem :data="item"></BlogItem>
      </div>
    </a-space>
  </div>
</template>

<script setup>
import BlogItem from "./components/BlogItem.vue";
import { ref, reactive, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import { LIST_BLOG } from "@/api/blog";

// 博客列表数据
const data = ref([]);
const pagination = reactive({
  total: 0,
  showTotal: true,
  showPageSize: true,
  showJumper: true,
  defaultPageSize: 20,
  current: 1,
  pageSizeOptions: [2, 10, 20, 30, 40, 50],
  pageSize: 20,
});
const listBlogLoading = ref(false);
const listBlogQuery = reactive({
  page_size: 20,
  page_number: 1,
  keywords: "",
  status: "published",
});

// 访问后端API 拉却数据
const featchBlogList = async () => {
  try {
    listBlogLoading.value = true;

    console.log(listBlogQuery);
    const resp = await LIST_BLOG(listBlogQuery);
    console.log(resp);

    data.value = resp.items;
    pagination.total = resp.total;
  } catch (error) {
    // 反馈组件, 进行消息提醒
    Message.error({
      content: `获取博客列表失败: ${error.message}`,
      duration: 5000,
    });
  } finally {
    listBlogLoading.value = false;
  }
};

// 在页面加载完成后, 通过API请求数据
onMounted(featchBlogList);
</script>

<style lang="scss" scoped></style>
